<!--
 * @Author       : Harry
 * @Date         : 2021-12-27 10:41:29
 * @LastEditors  : Harry
 * @LastEditTime : 2021-12-27 14:05:48
 * @FilePath     : \前端趣味\random_food\src\App.vue
 * @Description  : Input
-->
<template>
  <div id="app">
    <div class="title-wrapper">
      <span class="title-emoji">🧐</span>
      <span class="title-text">今天吃什么？</span>
    </div>
    <van-cell-group>
      <van-field
        v-model="value"
        label="吃啥？"
        :placeholder="placeholderText"
        center
        ref="food"
      >
        <template #button>
          <div class="button-list">
            <van-button @click="foodClick(value)" class="eat-addin"
              >加入</van-button
            >
            <van-button type="danger" @click="allClick">提交</van-button>
          </div>
        </template>
      </van-field>
    </van-cell-group>
    <div class="eat-what">
      
      {{eatWhat}}
    </div>
  </div>
</template>

<script>
import { Dialog ,Toast} from "vant";
export default {
  name: "App",
  components: {},
  data() {
    return {
      value: "",
      eatWhat: "",
      placeholderText: "输入想吃点击加入",
      eatList: [],
    };
  },
  methods: {
    foodClick(value) {
      if(value === ''){
        Toast.fail('不允许加空值');
        return 
      }
      this.eatList.push(value);
      this.value = "";
      this.placeholderText = "还有吗？";
    },
    allClick() {
      Dialog.confirm({
        title: "提交你想吃的",
        message: "进行如下操作以后会随机生成一个你想吃的，确定执行吗？",
      })
        .then(() => {
          // on confirm
          let index = Math.floor((Math.random()*this.eatList.length))
          this.eatWhat = this.eatList[index]
          console.log(this.eatList);
          console.log(this.eatWhat);
          // 清空数组
          this.eatList = []
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style>
.title-wrapper {
  display: flex;
  justify-content: center;
}
.title-emoji,
.title-text {
  font-size: 1.7em;
}
.button-list .van-button {
  margin-left: 10px;
}
.eat-what{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5em;
  margin-top: 20px;
  color: red;
}

</style>
